<script setup lang="ts">
	import { ref, nextTick, defineProps, computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";

	const indicatorDots = ref(false)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)

	const current = ref(0)
	const currentOld = ref(0)

	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})

	// 创建计算属性，处理接收到的参数
	const name = computed(() => {
		return props.data[current.value]?.name
	});
	const unit = computed(() => {
		return props.data[current.value]?.unit
	});

	function onSwipeChange(evt) {
		currentOld.value = current.value
		current.value = evt.detail.current;
	}

	async function clickDot(index) {
		current.value = currentOld.value
		await nextTick()
		current.value = index
	}

	function gotoInfinite(id) {
		uni.navigateTo({
			url: '/pages/index/donglishang?id=' + id
		})
	}
</script>

<template>
	<view class="products-swiper">
		<swiper class="swiper" circular :autoplay="autoplay" @change="onSwipeChange">
			<swiper-item v-for="(item, index) in data" :key="index">
				<view class="swiper-item">
					<image class="img" :src="item.main_photo" @click="gotoInfinite(item.id)" mode="widthFix" />
				</view>
			</swiper-item>
		</swiper>
		<!-- custom swiper dots -->
		<view class="swiper-bottom">
			<view class="name">{{ name }}</view>
			<view class="custom-dots-wrapper">
				<view class="custom-dot" :class="index === current ? 'active': ''" v-for="(item, index) in data"
					:key="index" @click="() => clickDot(index)" />
			</view>
			<view class="extra">{{ unit }}</view>
		</view>
	</view>
</template>

<style scoped>
	.products-swiper {
		margin: 0 auto;
		background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/swiper-border.png');
		background-size: contain;
		background-repeat: no-repeat;
		width: 100%;
		aspect-ratio: 351/164;
		/* margin-top: 12px; */
		position: relative;
	}

	.swiper-bottom {
		position: absolute;
		width: 100%;
		bottom: 14px;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		font-size: 14px;
	}

	.swiper-bottom .name {
		width: 122px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swiper-bottom .name,
	.swiper-bottom .extra {
		color: white;
		padding: 0 7px;
		flex: 1;
	}

	.custom-dots-wrapper {
		display: flex;
		align-items: center;
		gap: 10px;
		width: auto;
		flex: 1;
		justify-content: space-around;
	}

	.swiper-bottom .extra {
		text-align: right;
	}

	.custom-dot {
		width: 14px;
		height: 5px;
		background: #5E5E5E;
	}

	.custom-dot.active {
		width: 14px;
		height: 5px;
		background: linear-gradient(150deg, #2F76EC 0%, #D85AE7 100%);
	}

	.products-swiper .swiper {
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-align: center;
		padding-top: 10px;
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 34px;
		/* 20px + 14px */
		box-sizing: border-box;
	}

	.swiper-item .img {
		width: 100%;
		/* max-width: 100%; */
		/* max-height: 100%; */
		display: block;
		box-sizing: border-box;
		padding: 0 0 8px;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.uni-bg-red {
		background-color: 'red';
	}

	.uni-bg-green {
		background-color: 'green';
	}

	.uni-bg-blue {
		background-color: 'blue';
	}
</style>